<template>
  <div class="titleTextSet">
    <el-form
      :model="config"
      :rules="rules"
      ref="ruleForm"
      label-width="80px"
      class="demo-ruleForm"
    >
      <el-form-item label="标题内容" prop="title">
        <el-input v-model="config.title"></el-input>
      </el-form-item>
      <el-form-item label="描述内容" prop="title">
        <el-input v-model="config.desc" type="textarea" :rows="2"></el-input>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div>
      <div class="deco-control-group">
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">显示位置</div>
            <div class="deco-control-group__value">
              {{ config.align ? '居中显示' : '居左显示' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.align" size="mini">
              <el-radio-button :label="0">
                <span class="my-iconfont icon-icon_rta_zuo"></span>
              </el-radio-button>
              <el-radio-button :label="1">
                <span class="my-iconfont icon-icon_rt_zhong"></span>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">标题大小</div>
            <div class="deco-control-group__value">
              {{
                config.title_size === 16
                  ? '大 (16号)'
                  : config.title_size === 14
                  ? '中 (14号)'
                  : '小 (12号)'
              }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.title_size" size="mini">
              <el-radio-button :label="16">
                <span class="my-iconfont icon-icon_rt_ta"></span>
              </el-radio-button>
              <el-radio-button :label="14">
                <span class="my-iconfont icon-icon_rt_tb"></span>
              </el-radio-button>
              <el-radio-button :label="12">
                <span class="my-iconfont icon-icon_rt_tc"></span>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">描述大小</div>
            <div class="deco-control-group__value">
              {{
                config.desc_size === 16
                  ? '大 (16号)'
                  : config.desc_size === 14
                  ? '中 (14号)'
                  : '小 (12号)'
              }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.desc_size" size="mini">
              <el-radio-button :label="16">
                <span class="my-iconfont icon-icon_rt_ta"></span>
              </el-radio-button>
              <el-radio-button :label="14">
                <span class="my-iconfont icon-icon_rt_tb"></span>
              </el-radio-button>
              <el-radio-button :label="12">
                <span class="my-iconfont icon-icon_rt_tc"></span>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">标题粗细</div>
            <div class="deco-control-group__value">
              {{ config.title_weight === 'normal' ? '常规体' : '加粗体' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.title_weight" size="mini">
              <el-radio-button label="normal">
                <span class="my-iconfont icon-icon_rta_bb"></span>
              </el-radio-button>
              <el-radio-button label="bold">
                <span class="my-iconfont icon-icon_rt_ba"></span>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">描述粗细</div>
            <div class="deco-control-group__value">
              {{ config.desc_weight === 'normal' ? '常规体' : '加粗体' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-radio-group v-model="config.desc_weight" size="mini">
              <el-radio-button label="normal">
                <span class="my-iconfont icon-icon_rta_bb"></span>
              </el-radio-button>
              <el-radio-button label="bold">
                <span class="my-iconfont icon-icon_rt_ba"></span>
              </el-radio-button>
            </el-radio-group>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">标题颜色</div>
            <div class="deco-control-group__value">
              {{ config.title_color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.title_color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">描述颜色</div>
            <div class="deco-control-group__value">
              {{ config.desc_color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.desc_color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>
        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">背景颜色</div>
            <div class="deco-control-group__value">
              {{ config.bg_color }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-color-picker
              v-model="config.bg_color"
              color-format="hex"
              :predefine="defaultColor"
            />
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">底部分割线</div>
            <div class="deco-control-group__value">
              {{ config.show_divider ? '显示' : '不显示' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-checkbox v-model="config.show_divider"></el-checkbox>
          </div>
        </div>

        <div class="deco-control-group-container">
          <div class="deco-control-group__header">
            <div class="deco-control-group__label">查看更多</div>
            <div class="deco-control-group__value">
              {{ config.show_link ? '显示' : '不显示' }}
            </div>
          </div>
          <div class="deco-control-group__content">
            <el-checkbox v-model="config.show_link"></el-checkbox>
          </div>
        </div>
        <template v-if="config.show_link">
          <div class="deco-control-group-container">
            <el-radio-group v-model="config.link_type">
              <el-radio :label="0">样式一</el-radio>
              <el-radio :label="1">样式二</el-radio>
              <el-radio :label="2">样式三</el-radio>
            </el-radio-group>
          </div>
          <div
            class="deco-control-group-container"
            v-if="config.link_type !== 2"
          >
            <el-input v-model="config.link_text"></el-input>
          </div>
          <div class="deco-control-group-container">
            <div class="deco-control-group__header">
              <div class="deco-control-group__label">跳转链接</div>
            </div>
            <el-input v-model="config.link"></el-input>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['value','defaultColor'],
  data() {
    return {
      config: this.value ? this.value : {},
      rules: {}
    }
  },
  watch: {
    value(newVal) {
      this.config = newVal
    },
    config(newVal, oldVal) {
      this.$emit('input', newVal)
    }
  },
  methods: {}
}
</script>

<style lang="less">
@import '../style/iconfont.css';
@import './common.less';
.titleTextSet {
  padding: 5px;
}
</style>
